{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}

<div class="is-grid grid-2-columns grid-gap-2 has-top-margin-l">
  <OverviewCard
    @cardTitle="Issuers"
    @subText="The total number of issuers in this PKI mount. Includes both root and intermediate certificates."
    @actionText="View issuers"
    @actionTo="issuers"
    @actionModel={{@engine.id}}
  >
    <Hds::Text::Display @tag="h2" @size="500">
      {{format-number (if (eq @issuers 404) 0 @issuers.length)}}
    </Hds::Text::Display>
  </OverviewCard>
  {{#if (not-eq @roles 403)}}
    <OverviewCard
      @cardTitle="Roles"
      @subText="The total number of roles in this PKI mount that have been created to generate certificates."
      @actionText="View roles"
      @actionTo="roles"
      @actionModel={{@engine.id}}
    >
      <Hds::Text::Display @tag="h2" @size="500">
        {{format-number (if (eq @roles 404) 0 @roles.length)}}
      </Hds::Text::Display>
    </OverviewCard>
  {{/if}}
  <OverviewCard @cardTitle="Issue certificate" @subText="Begin issuing a certificate by choosing a role.">
    <div class="has-top-margin-m is-flex">
      <SearchSelect
        class="is-flex-grow-1"
        @ariaLabel="Role"
        @selectLimit="1"
        @models={{array "pki/role"}}
        @backend={{@engine.id}}
        @placeholder="Type to find a role..."
        @disallowNewItems={{true}}
        @onChange={{this.handleRolesInput}}
        @fallbackComponent="input-search"
        @renderInPlace={{true}}
        data-test-issue-certificate-input
      />
      <Hds::Button
        @text="Issue"
        @color="secondary"
        class="has-left-margin-s align-self-baseline"
        type="submit"
        disabled={{unless this.rolesValue true}}
        {{on "click" this.transitionToIssueCertificates}}
        data-test-issue-certificate-button
      />
    </div>
  </OverviewCard>

  <OverviewCard @cardTitle="View certificate" @subText="Quickly view a certificate by typing its serial number.">
    <div class="has-top-margin-m {{unless this.certificateValue 'is-flex'}}">
      <SearchSelect
        class="is-flex-grow-1"
        @ariaLabel="Certificate serial number"
        @selectLimit="1"
        @models={{array "pki/certificate/base"}}
        @backend={{@engine.id}}
        @placeholder="33:a3:..."
        @disallowNewItems={{true}}
        @onChange={{this.handleCertificateInput}}
        @fallbackComponent="input-search"
        @renderInPlace={{true}}
        data-test-view-certificate-input
      />
      <Hds::Button
        @text="View"
        @color="secondary"
        class="align-self-baseline {{unless this.certificateValue 'has-left-margin-s'}}"
        disabled={{unless this.certificateValue true}}
        {{on "click" this.transitionToViewCertificates}}
        data-test-view-certificate-button
      />
    </div>
  </OverviewCard>

  <OverviewCard @cardTitle="View issuer" @subText="Choose or type an issuer name or ID to view its details">
    <div class="has-top-margin-m is-flex">
      <SearchSelect
        class="is-flex-grow-1"
        @ariaLabel="Issuer name or ID"
        @selectLimit="1"
        @models={{array "pki/issuer"}}
        @backend={{@engine.id}}
        @placeholder="Type to find an issuer..."
        @disallowNewItems={{true}}
        @onChange={{this.handleIssuerSearch}}
        @fallbackComponent="input-search"
        @shouldRenderName={{true}}
        @nameKey="issuerName"
        @renderInPlace={{true}}
        data-test-issue-issuer-input
      />
      <Hds::Button
        @text="View"
        @color="secondary"
        class="has-left-margin-s align-self-baseline"
        type="submit"
        disabled={{unless this.issuerValue true}}
        {{on "click" this.transitionToIssuerDetails}}
        data-test-view-issuer-button
      />
    </div>
  </OverviewCard>
</div>